import React from 'react'
import {WeaColorPicker,
        WeaSearchGroup,
        WeaFormItem,
        WeaInput,
        WeaSelect,
        WeaHelpfulTip,
        WeaLocaleProvider,
        WeaInputNumber,
        WeaError,
        WeaBrowser,
         WeaCheckbox
} from 'ecCom'
import {Button,Icon} from 'antd'
import {WeaMaterialLib} from 'weaPortalPublic';

const getLabel = WeaLocaleProvider.getLabel;
class Content extends React.Component{

    setStateData = (data) =>{
        let setting = Object.assign({},this.props.data.setting,data);
        this.props.setStateData({setting:setting})
    }

    render(){
        // const options =[{key: "1", selected: true, showname: getLabel(19525,'列表式')},{key: "2", selected: false, showname: getLabel(387382,'列表式2')},{key: "3", selected: false, showname: getLabel(501235,'幻灯片模式')},{key: "4", selected: false, showname: getLabel(501246,'多图模式')}];
        const options =[{key: "1", selected: true, showname: getLabel(19525,'列表式')}];
        const options2 = [{key:"1",selected:true,showname:getLabel(128030,"填充")},{key:"2",selected:false,showname:getLabel(386583,"适应")},{key:"3",selected:false,showname:getLabel(386584,"拉伸")}]
         const options3 = [{key:"1",selected:true,showname:getLabel(501238,'位置1')},{key:"2",selected:false,showname:getLabel(501239,'位置2')}]
         let docids=this.props.data.docids;
         if(docids.length>0){
             if(docids[0].id==""){
                 docids=[];
             }
         }

        return <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@kigtnk`} showGroup={true}>
            {
                this.props.data.showType=="1" ||   this.props.data.showType=="2"
                    ?(
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@fpnleg`} label={getLabel(229,"标题")} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                            <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@siw8ny`}  ref='weaError'
                                       error={getLabel(388025,"标题不能为空")}>
                                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@cag9cf`}  style={{width:313}} value={this.props.data.title} viewAttr={3} onChange={(value)=>{this.props.titleChange(value);
                                    if(value === '') this.refs.weaError.showError();
                                }}/>
                            </WeaError>

                        </WeaFormItem>
                    ):""
            }

            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@pdseov`} label={getLabel(501240,'展示类型')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <div style={{width: '100%'}}>
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@04fub9`}
                        options={options}
                        viewAttr="3"
                        value={this.props.data.showType}
                        onChange={value => this.props.changeViewType(value)}
                    />
                </div>
            </WeaFormItem>
            {
                this.props.data.showType=="3"
                    ?(
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@es6rvx`} label={getLabel(501241,'导航栏位置')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                            <div style={{width: '100%'}}>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@o40cy1`}
                                    options={options3}
                                    viewAttr="3"
                                    value={this.props.data.setting.navigationBarLocationType}
                                    onChange={value => this.setStateData({navigationBarLocationType:value})}
                                />
                            </div>
                        </WeaFormItem>
                    ):""
            }
            {
                this.props.data.showType=="3"
                    ?(
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@v0tr9m`} label={getLabel(501242,'标题栏样式')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                            <span style={{display:'inline-block',width:'60px'}}>{getLabel(203,'宽度')}：</span>
                            <div style={{display:'inline-block',width:"100px",'margin-right':'20px'}}>
                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@x1vtqc`}
                                    value = {this.props.data.setting.titleWidth}
                                    onChange = {(value)=> this.setStateData({titleWidth:value})}
                                />
                            </div>
                            <span  style={{display:'inline-block',width:'60px'}}>{getLabel(207,'高度')}：</span>
                            <div style={{display:'inline-block',width:"100px",'margin-right':'20px'}}>
                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@pe2vd1`}
                                    value = {this.props.data.setting.titleHeight}
                                    onChange = {(value)=> this.setStateData({titleHeight:value})}
                                />
                            </div>
                            <span  style={{display:'inline-block',width:'60px'}}>{getLabel(500424,'背景颜色')}：</span>
                            <div style={{display:'inline-block',width:"100px",'vertical-align':'middle','margin-right':'20px'}}>
                                <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@smi2wu`}
                                    value={this.props.data.setting.bgc}
                                    onChange={(v)=> this.setStateData({"bgc": v})}
                                />
                            </div>
                            <br/>
                            <span  style={{display:'inline-block',width:'60px'}}>{getLabel(84212,'字体大小')}：</span>
                            <div style={{display:'inline-block',width:"100px",'margin-right':'20px'}}>
                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@3ayga0`}
                                    value = {this.props.data.setting.titleFontSize}
                                    onChange = {(value)=> this.setStateData({titleFontSize:value})}
                                />
                            </div>
                            <span  style={{display:'inline-block',width:'60px'}}>{getLabel(2076,'字体颜色')}：</span>
                            <div style={{display:'inline-block',width:"100px",'vertical-align':'middle','margin-right':'20px'}}>
                                <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@ke8teu`}
                                    value={this.props.data.setting.titleColor}
                                    onChange={(v)=> this.setStateData({"titleColor": v})}
                                />
                            </div>
                        </WeaFormItem>

                    ):""
            }
            {
                this.props.data.showType=="3"
                    ?(
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@s796l4`} label={getLabel(386582,'填充方式')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                            <div style={{width: '100%'}}>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@h95flk`}
                                    options={options2}
                                    viewAttr="3"
                                    value={this.props.data.documentImageShowWay}
                                    onChange={value => this.props.documentImageShowWayChange(value)}
                                />
                            </div>
                        </WeaFormItem>
                    ):""
            }
            {
                this.props.data.showType=="4"
                    ?(
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@xwpdaa`} label={getLabel(386564,'图片大小')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                            <div >
                                <span style={{display:'inline-block',width:'50px'}}>{getLabel(386529,'宽度：')}</span>
                                <div style={{display:'inline-block',width:'100px'}}>
                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@rcyrps`}
                                        value = {this.props.data.imgWidth}
                                        onChange = {(value)=> this.props.setStateData({imgWidth:value})}
                                    />
                                </div>
                                <span style={{display:'inline-block',width:'50px','margin-left':'20px'}}>{getLabel(386530,'高度：')}</span>
                                <div style={{display:'inline-block',width:'100px'}}>
                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@3tivno`}
                                        value = {this.props.data.imgHeight}
                                        onChange = {(value)=> this.props.setStateData({imgHeight:value})}
                                    />
                                </div>
                                <span style={{display:'inline-block',width:'60px','margin-left':'20px'}}>{getLabel(501244,'均匀滚动：') }</span>
                                <div style={{display:'inline-block'}}>
                                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@kzs1p1`}
                                        value={this.props.data.uniformity}
                                        onChange={(value) => {
                                            if (value === "1") {
                                                this.props.setStateData({uniformity:1})
                                            } else {
                                                this.props.setStateData({uniformity:0})
                                            }
                                        }}
                                    />
                                </div>
                            </div>

                        </WeaFormItem>
                    ):""
            }

            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@c3fw66`} label={getLabel(19493,"显示条数")}  labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@75brty`}
                    value = {this.props.data.showNum}
                    onChange = {(value)=> this.props.ShowNumChnage(value)}
                />
            </WeaFormItem>

            {
                this.props.data.showType=="1" ||   this.props.data.showType=="2"
                    ?(
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@g6rwxb`} label={"样式"} labelCol={{span: 6}} wrapperCol={{span: 18}} >
                                <span style={{'vertical-align':'middle',display:'inline-block',width:"60px"}}>{getLabel(2077,"背景颜色")}</span>
                                <div style={{display:'inline-block',width:'100px','vertical-align':'middle','margin-right':'20px'}}>
                                    <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@b28gwb`} value={this.props.data.bgColor}
                                                    onChange = {(value) => this.props.changebgColor(value)}
                                    />
                                </div>
                                <span style={{'vertical-align':'middle',display:'inline-block',width:"60px"}}>{getLabel(390778,'背景透明度')}</span>
                                <div style={{display:'inline-block',width:'100px','vertical-align':'middle','margin-right':'20px'}}>
                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@qh9g7g`} value={this.props.data.bgTmd}
                                                    onChange = {(value) => this.props.changeBgTmd(value)}
                                    />
                                </div>
                                <span style={{'vertical-align':'middle',display:'inline-block',width:"60px"}}>字体大小</span>
                                <div style={{display:'inline-block',width:'100px','vertical-align':'middle','margin-right':'20px'}}>
                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@hpyqiv`} value={this.props.data.setting.contentFontSize}
                                                    onChange = {(value) => this.props.setStateData({setting:Object.assign({},this.props.data.setting,{contentFontSize:value})})}
                                    />
                                </div >
                                <br/>
                                <span style={{'vertical-align':'middle',display:'inline-block',width:"60px"}}>字体颜色</span>
                                <div style={{display:'inline-block',width:'100px','vertical-align':'middle','margin-right':'20px'}}>
                                    <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@dab48j`} value={this.props.data.setting.contentColor}
                                                    onChange ={(value) => this.props.setStateData({setting:Object.assign({},this.props.data.setting,{contentColor:value})})}
                                    />
                                </div>
                                <span style={{'vertical-align':'middle',display:'inline-block',width:"60px"}}>内容间距</span>
                                <div style={{display:'inline-block',width:'100px','vertical-align':'middle','margin-right':'20px'}}>
                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@c13rsg`} value={this.props.data.setting.contentSpaceing}
                                                    onChange = {(value) => this.props.setStateData({setting:Object.assign({},this.props.data.setting,{contentSpaceing:value})})}
                                    />
                                </div>

                        </WeaFormItem>
                    ):""
            }

            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@pfwblq`} label={getLabel(390795,"选择文档")} labelCol={{span: 6}} wrapperCol={{span: 18}} >
                <div style={{display:'inline-block',width:'313px'}}>
            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@hfgn4o`}
                title={getLabel(386382,"请选择")}
                type="doccategory"
                replaceDatas={docids || []}
                isSingle={false}
                onChange={(ids, names, datas) => {
                this.props.changeDoc(datas);
                }}
                layout={document.body}
            /></div>
            </WeaFormItem>
            {/*未读数 标准不支持，先注释*/}
            {/*{*/}
                {/*this.props.data.showType=="1" ||   this.props.data.showType=="2" ? (*/}
                    {/*<WeaFormItem label={getLabel(82641,"显示未读数")}  labelCol={{span: 6}} wrapperCol={{span: 18}} >*/}
                        {/*<div style={{display:'inline-block',width:'70px'}}>*/}
                            {/*<WeaCheckbox*/}
                                {/*value={this.props.data.setting.isShowNumber}*/}
                                {/*display="switch"*/}
                                {/*id='test'*/}
                                {/*onChange ={(value) => this.props.setStateData({setting:Object.assign({},this.props.data.setting,{isCount:isShowNumber})})}*/}
                            {/*/>*/}
                        {/*</div>*/}
                    {/*</WeaFormItem>*/}
                {/*):(*/}
                    {/*""*/}
                {/*)*/}

            {/*}*/}
            {
                this.props.data.showType=="1" ||   this.props.data.showType=="2"
                    ?(
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@knh4tk`} label={getLabel(387941,"选择图标")} labelCol={{span: 6}} wrapperCol={{span: 18}}>
                            {
                                this.props.data.icon ? (
                                    <div className="e9desktop-menu-add-img-edit">
                                        <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@n9ri92`}
                                            multiCheck={false} onChange={(value)=>{ this.props.changeIcon(value)}} type='button'
                                        >
                                            <img src={ this.props.data.icon} alt="" className="e9desktop-menu-add-img-edit-img" title={getLabel(387150,"更换图标")}/>
                                        </WeaMaterialLib>
                                        <div className="e9desktop-menu-add-img-edit-del" title={getLabel(82746,"删除图标")}>
                                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@pag295`} type="cross" onClick={() =>  this.props.changeIcon("") }/>
                                        </div>
                                    </div>
                                ) : (
                                    <div className="e9desktop-menu-add-img-add">
                                        <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@kzd61o`} multiCheck={false} onChange={(value)=>{ this.props.changeIcon(value)}} type='button' >

                                            <div className="e9desktop-menu-add-img-add-icon" title= {getLabel(387151,"添加图标")}>
                                                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@gkhoto`} type="plus"/>
                                            </div>
                                        </WeaMaterialLib>
                                    </div>
                                )
                            }
                        </WeaFormItem>
                    ):""
            }

        </WeaSearchGroup>
    }
}

export default Content;